<template>
    <view>
        <view class="smart-page-head">
            <view class="smart-page-head-title">icon, 图标</view>
        </view>
        <view class="smart-padding-wrap">
            <view class="item">
                <view class="icon-list">
                    <view class="icon-item">
                        <icon type="success" size="30" color="#09BB07"/>
                        <text>success</text>
                    </view>
                    <view class="icon-item">
                        <icon type="info" size="30" color="#10AEFF"/>
                        <text>info</text>
                    </view>
                    <view class="icon-item">
                        <icon type="warn" size="30" color="#F76260"/>
                        <text>warn</text>
                    </view>
                    <view class="icon-item">
                        <icon type="waiting" size="30" color="#10AEFF"/>
                        <text>waiting</text>
                    </view>
                    <view class="icon-item">
                        <icon type="clear" size="30" color="#F76260"/>
                        <text>clear</text>
                    </view>
                    <view class="icon-item">
                        <icon type="download" size="30" color="#09BB07"/>
                        <text>download</text>
                    </view>
                    <view class="icon-item">
                        <icon type="search" size="30" color="#999999"/>
                        <text>search</text>
                    </view>
                    <view class="icon-item">
                        <icon type="cancel" size="30" color="#F76260"/>
                        <text>cancel</text>
                    </view>
                </view>
            </view>
            <view class="item">
                <view class="title">不同尺寸的图标</view>
                <view class="icon-size-list">
                    <icon type="success" size="20" color="#09BB07"/>
                    <icon type="success" size="30" color="#09BB07"/>
                    <icon type="success" size="40" color="#09BB07"/>
                    <icon type="success" size="50" color="#09BB07"/>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .item {
        margin-bottom: 40rpx;
    }
    .icon-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 25%;
        margin-bottom: 30rpx;
    }
    .icon-item text {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #666;
    }
    .icon-size-list {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 20rpx;
    }
</style>